import React from 'react';
import Grid from '../../components/table/grid';
import {
    Input,
    Button,
    Row,
    Col,
    Form,
    Select,
    Divider,
    message,
    Popconfirm,
} from 'antd';
import axios from 'axios';
import ChargeHisModle from './chargeHisModle';
import '../login/login.css';

const Option = Select.Option;
const FormItem = Form.Item;
const createForm = Form.create;
// const RadioButton = Radio.Button;
// const RadioGroup = Radio.Group;

class rechargeManage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible4charge: false,
            visible4chargeHis: false,
            amount: "50",
            options: [
                {value: "50"},
                {value: "100"},
                {value: "200"},
                {value: "300"},
                {value: "500"}
            ],
            accountIds: [],
            selectAccount: {},
            params: {
                account: ``,
                name: ``
            },
            refresh: 0
        }
        this.columns = [
            {
                title: '用户名',
                dataIndex: 'account',
                key: 'account',
            },
            {
                title: '员工姓名',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '添加时间',
                dataIndex: 'registTime',
                key: 'registTime',
            },
            {
                title: '余额（元）',
                dataIndex: 'amount',
                key: 'amount',
                render: (text, record) => (
                    <span>
                            {this.getAmount(record.amount)}
                    </span>
                )
            },
            {
                title: '累计充值（元）',
                dataIndex: 'totalAmount',
                key: 'totalAmount',
                render: (text, record) => (
                    <span>
                            {this.getTotalAmount(record.totalAmount)}
                    </span>
                )
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
            },
            {
                title: '操作',
                width: '15%',
                key: 'action',
                render: (text, record) => (
                    <span>
                        <a onClick={() => this.chargeHis(text, record)}>充电记录</a>
                    </span>
                )
            }
        ];
    }

    getAmount(amount) {
        if (amount === undefined || amount === null || amount === '') {
            return 0;
        } else {
            return amount;
        }
    }

    getTotalAmount(totalAmount) {
        if (totalAmount === undefined || totalAmount === null || totalAmount ==='') {
            return 0;
        } else {
            return totalAmount;
        }
    }

    //表格提交
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((errors, values) => {
            if (!!errors) {
                return;
            }
            this.setState({
                params: {...values},
                refresh: this.state.refresh + 1
            });
            // this.setState(Object.assign(this.state.params,values))
        });
    }

    //接口数据转换
    transformData = (data) => {
        const common = this.props.intl.messages.common;
        data.forEach((item) => {
            if (item.status === 1) {
                item.status = common.waitConfirm
            } else if (item.status === 2) {
                item.status = common.normal
            } else if (item.status === 3) {
                item.status = common.forbidden
            }
        });
        return data
    };
    //充值按钮
    onChange = (value) => {
        console.log(value)
        this.setState({
            amount: value,
        });
    }
    hideModal = () => {
        this.setState({
            visible4charge: false,
        });
    };
    rechargeLog = () => {
        let params = {
            amount: this.state.amount,
            accountIds: this.state.accountIds.toString(),
        }
        axios.post('/api/user/rechargeLog/add', {...params}).then(res => {
            if (res&&res.code==200) {
                this.setState({
                    visible4charge: false,
                    refresh: this.state.refresh + 1
                });
            }
        })
    };
    //修改数据
    saveFormRef = (formRef) => {
        this.formRef = formRef;
    };
    handleCancel = () => {
        this.setState({visible: false});
    };

    //打开折扣弹框
    discount = (text) => {
        this.setState({
            visible4discount: true,
            selectAccount: text,
        });
    }
    //关闭折扣弹框
    closeDiscount = () => {
        //清空
        this.setState({
            visible4discount: false
        })
        const form = this.discountForm.props.form;
        form.resetFields();
    }

    handleDiscount = () => {
        const form = this.discountForm.props.form;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            // console.log(this.state.selectAccount.id)
            values.id = this.state.selectAccount.id;
            delete values.account;
            axios.post('/api/user/dsc/mod', {...values}).then(res => {
                if (res&&res.data) {
                    this.setState({
                        visible4discount: false,
                        refresh: this.state.refresh + 1
                    });
                }
            })
        });
    }
    saveDiscount = (formRef) => {
        this.discountForm = formRef;
    }

    render() {
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    accountIds: selectedRowKeys
                })
            },
        };
        const {getFieldDecorator} = this.props.form;
        const marginRight8 = {
            marginRight: 8
        }
       /* const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 9 },
            },
        };*/
        return (
            <div>
                {/*---------------金额充值--------------------*/}
                {/*<Modal*/}
                    {/*title="金额充值"*/}
                    {/*visible={this.state.visible4charge}*/}
                    {/*onOk={this.rechargeLog}*/}
                    {/*onCancel={this.hideModal}*/}
                    {/*okText="确认"*/}
                    {/*cancelText="取消"*/}
                {/*>*/}
                    {/*<span style={{paddingRight: '10px'}}>充值金额：</span>*/}
                    {/*<InputNumber size="large" max={10000} defaultValue={this.state.amount} onChange={this.onChange}/>*/}
                {/*</Modal>*/}
                {/*---------------充电记录--------------------*/}
                <ChargeHisModle
                    visible={this.state.visible4chargeHis}
                    onCancel={this.closeChargeHis}
                    account={this.state.selectAccount}
                />

                <span style={{fontWeight: 'bold', fontSize: 26}}><i className="sass-title-icon"></i>员工管理</span>
                <Divider/>
                <div>
                    <form form={this.props.form}>
                        <Row gutter={24}>
                            <Col span={3}>
                                <FormItem
                                >
                                    {getFieldDecorator('account')(
                                        <Input placeholder="用户名"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={3}>
                                <FormItem
                                >
                                    {getFieldDecorator('name')(
                                        <Input placeholder="员工姓名"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4}>
                                <FormItem
                                    label="充值金额"
                                >
                                    {getFieldDecorator('amount', {
                                        initialValue: this.state.amount,
                                    })(
                                        <Select mode="combobox"  style={{width: '100%'}}>
                                            {
                                                this.state.options.map((item) =>
                                                    <Option value={item.value} key={item.value}>{item.value}</Option>
                                                )
                                            }
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem>
                                    <Button className="ant-btn-84" type="primary" icon="search"
                                            onClick={this.handleSubmit} style={marginRight8}>查询</Button>
                                    <Popconfirm placement="top" title="确认执行改操作？" okText="确认" onConfirm={() => {
                                        if (this.state.accountIds.length === 0) {
                                            message.error('请先选择员工');
                                            return
                                        }
                                        this.rechargeLog()
                                    }}>
                                        <Button type="primary" className="ant-btn-84">批量充值</Button>
                                    </Popconfirm>
                                    <Popconfirm placement="top" title="确认执行改操作？" okText="确认" onConfirm={() => {}}>
                                        <Button type="primary" className="ant-btn-84">全部充值</Button>
                                    </Popconfirm>
                                </FormItem>
                            </Col>
                        </Row>
                    </form>
                </div>
                <Grid rowSelection={rowSelection} transformData={this.transformData} refresh={this.state.refresh}
                      params={this.state.params} columns={this.columns} url="api/user/qry"/>
            </div>

        )
    }

}

rechargeManage = createForm()(rechargeManage);
export default rechargeManage
